<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    
</head>
<style>
    * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  img {
    width: 1200px;
    height: 300px;
    object-fit: cover;
    margin: 20px;
  }
  body {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
  }
</style>

<body>
    <img  data-src="./img/1.jpg" src="./img/13.jpg"  alt="">
    <img  data-src="./img/2.jpg" src="./img/13.jpg" alt="">
    <img  data-src="./img/3.jpg" src="./img/13.jpg" alt="">
    <img  data-src="./img/4.jpg" src="./img/13.jpg" alt="">
    <img  data-src="./img/5.jpg" src="./img/13.jpg" alt="">
    <img  data-src="./img/6.jpg" src="./img/13.jpg" alt="">
    <img data-src="./img/7.jpg" src="./img/13.jpg" alt="">
    <img data-src="./img/8.png" src="./img/13.jpg" alt="">
    <img data-src="./img/9.png" src="./img/13.jpg" alt="">
    <img data-src="./img/10.jpg" src="./img/13.jpg" alt="">
    <img data-src="./img/11.jpg" src="./img/13.jpg" alt="">
    <img data-src="./img/12.jpg" src="./img/13.jpg" alt="">
    <img data-src="./img/13.jpg" src="./img/13.jpg" alt="">
</body>
<script>
    var imgs = document.getElementsByTagName('img')
   
    window.addEventListener("scroll", (e) => {
      ergodic();
    });
    function ergodic() {
      for (let i of imgs) {
        //计算方式和第一种方式不同
        if (i.getBoundingClientRect().top < window.innerHeight) {
          let trueSrc = i.getAttribute("data-src");
          i.setAttribute("src", trueSrc);
        }
      }
    }
    ergodic();
</script>
</html>